<template>
    <div>
        <div class="div1">
            <ul>
                <li @click="goBack">
                    <img src="../../assets/images/return.png" alt />
                </li>
                <li>
                    <input v-model="input" placeholder="请输入内容"/>
                </li>
                <li>
                    <span @click="goBack" v-if="input==''">取消</span>
                    <span style="color: #000" v-if="!input==''" @click="gotosearch">搜索</span>
                </li>
            </ul>
        </div>
        <div class="div2">
             <!-- v-if="input==''" -->
            <div v-if="input==''">
                <div class="div21">
                    <span>历史搜索</span>
                    <span @click="empty_his"><van-icon name="delete" size=".5rem"/></span>
                </div>
                <div class="div22">
                    <ul>
                        <li v-for="(item,index) in input_history" v-show="index<5" :key="index" @click="input=item;">{{ item }}</li>
                    </ul>
                </div>
            </div>
            

            <div class="course-rxf">
                <div class="course-rxf3">
                    <ul v-for="(item,key) in list" :key="key" class="course-rxful" @click="edd(item)">
                        <li>
                            <p>{{item.title}}</p>
                            <p>共{{item.browse_base}}课时</p>
                            <ul>
                                <li v-for="(item,key) in item.teachers_list" v-show="key<3" :key="key" style="display: flex;width: 100%;height: 40px">
                                    <img class="img1" :src="item.teacher_avatar" alt />
                                    <span>{{item.teacher_name}}</span>
                                </li>
                            </ul>
                            <hr style="color: #f2f2f2" />

                            <p class="course-rxfp">
                                <span class="a2">{{item.total_periods}}人报名</span>
                                <span class="a2" style="float: right;color: green">免费</span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { Icon } from 'vant';
import { search } from "@/request/http";
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
export default {
    // inject:["reload"],      //注入reload方法  刷新页面
    name:"Search",
    components:{
        [Icon.name]: Icon,
    },
     data() {
        return {
            list:[],
            input_history:[],
            from:{
                limit: 10,
                page:1,
                course_type: 0,
                keywords:""
            },
            input:"",
            hisList:[]
        };
    },
    methods: {
        ...mapMutations(['course1','course2']),
        get(){                                                       //获取本地数据
            this.input_history=JSON.parse(localStorage.getItem('list'))||[];
        },
        set(){                                                       //本地数据存储并获取
            localStorage.setItem('list', JSON.stringify(this.hisList));
            this.get()
        },
        onLoad() { 
            search(this.from).then(res => {
                res = res.data.data.list
                this.list=res
            });
        },
        gotosearch(){                                                  //搜索
            this.input_history.unshift(this.input)
            
            for(var i=0;i<this.input_history.length;i++){
                if(!this.hisList.includes(this.input_history[i])){
                    this.hisList.push(this.input_history[i])
                }
            }
            this.set()
            this.from.keywords=this.input
            this.onLoad()
        },
        empty_his() {                                      //删除
            
            this.input_history = [];
            this.set()
        },
        goBack(){                                          //取消 返回
            this.$router.go(-1);
            this.course2()
        }
    },
    mounted() {
        this.get()
    },
    watch: {
        input(val) {
            if (!val) {
                history.go(0)                  //刷新页面
                this.list = [];
            }
        }
    },
};
</script>

<style lang="scss" scoped>
.div1{
    padding:10px 0;
    width:100%;
    height:30px;
    border-bottom: 1px solid rgba(234, 234, 234, 1);
}
.div1 ul{
    display: flex;
}
.div1 ul li{
    width:10%;
    text-align: center;
    padding:8px 0 0 0;
}
.div1 ul li:nth-child(2){
    padding:0;
    flex:1;
}
.div1 ul li img{
    width:30%;
}
.div1 ul li input{
    height: 30px;
    padding-left: 20px;
    border: none;
    background: #e4e7ed;
    border-radius: 20px;
    font-size: 15px;
    width: 90%;
}
.div21{
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.div21 span{
    font-size:17px;
    vertical-align: middle;
}
.div22{
    padding:10px;
    width:100%;
}          
.div22 ul{
    display: flex;
}
.div22 ul li{
    padding: 5px 10px;
    background: #e4e7ed;
    border-radius: 15px;
    margin-left: 15px;
}



.course-rxf {
    width: 100%;
    background: #E5E5E5;
}
.course-rxf3{
    overflow: scroll;
}
.course-rxf3>ul{
    width: 95%;
    background: white;
    margin: 0 auto;
    border-radius: 5px;
    margin-top:10px; 
}
.course-rxf3>ul>.course-rxfp{
    padding-right:20px; 
}
.course-rxf3>ul>li{
    padding-left:5px; 
}
.course-rxf3>ul>li img{
    width: 25px;
    height: 25px;
    border-radius: 50%;
}
.course-rxf3>ul>li p{
    padding: 15px 0;
    span{
        margin-top: 10px;
    }
}
.course-rxf3>ul>li>ul{
    display: flex;
    width: 100%;
    overflow: hidden;
    // flex-wrap: wrap;
}
.course-rxf3>ul>li>ul>li{
    width: 25%;
}
.course-rxf3>ul>li>ul>li>span{
    margin-top: 5px;
    margin-left: 10px;
}
</style>